<template>
  <div class="wxchat-container" :style="{ backgroundColor: wrapBg }">
    <div
      id="window-view-container"
      class="window"
      :style="{ maxHeight: maxHeight + 'px', width: width + 'px' }"
    >
      <!-- main -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div ref="main">
          <div ref="content">
            <ul>
              <li
                v-for="message in messages"
                :key="message.id"
                :class="
                  message.direction == 2 ? 'an-move-right' : 'an-move-left'
                "
              >
                <p class="time">
                  <span v-text="message.ctime" />
                </p>
                <p v-if="message.type == 10000" class="time system">
                  <span v-html="message.content" />
                </p>
                <div
                  v-else
                  :class="'main' + (message.direction == 2 ? ' self' : '')"
                >
                  <img
                    class="avatar"
                    width="45"
                    height="45"
                    :src="
                      message.direction == 2 ? ownerAvatarUrl : contactAvatarUrl
                    "
                  >

                  <div
                    v-if="message.type == 1"
                    v-emotion="message.content"
                    class="text"
                  />
                  <div v-else-if="message.type == 2" class="text">
                    <img :src="message.content" class="image" alt="聊天图片">
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div
          :style="{ maxHeight: maxHeight - 50 + 'px' }"
          class="container-main"
        >
          <div class="message">
            <!-- <ul>
              <li
                v-for="message in messages"
                :key="message.id"
                :class="
                  message.direction == 2 ? 'an-move-right' : 'an-move-left'
                "
              >
                <p class="time">
                  <span v-text="message.ctime" />
                </p>
                <p v-if="message.type == 10000" class="time system">
                  <span v-html="message.content" />
                </p>
                <div
                  v-else
                  :class="'main' + (message.direction == 2 ? ' self' : '')"
                >
                  <img
                    class="avatar"
                    width="45"
                    height="45"
                    :src="
                      message.direction == 2 ? ownerAvatarUrl : contactAvatarUrl
                    "
                  />

                  <div
                    v-if="message.type == 1"
                    v-emotion="message.content"
                    class="text"
                  />
                  <div v-else-if="message.type == 2" class="text">
                    <img :src="message.content" class="image" alt="聊天图片" />
                  </div>
                </div>
              </li>
            </ul> -->
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <div>
      asdadsasdadda
    </div>
  </div>
</template>

<script>
// //微信聊天可视化组件
// //依赖scrollLoader组件, 依赖指令v-emotion（实现请查看main.js）

// //参数：
// // width               组件宽度，默认450
// // wrapBg              外层父元素背景颜色，默认#efefef
// // maxHeight           展示窗口最高高度, 默认900
// // contactAvatarUrl    好友头像url
// // ownerAvatarUrl      微信主人头像url
// // ownerNickname       微信主人昵称
// // getUpperData        （必需）当滚动到上方时加载数据的方法，返回值要为Promise对象，resolve的结构同data
// // getUnderData        （必需）当滚动到下方时加载数据的方法，返回值同上
// // data                （必需）传入初始化数据， 结构如下：
// [{
//     direction: 2, //为2表示微信主人发出的消息，1表示联系人
//     id: 1, //根据这个来排序消息
//     type: 1, //1为文本，2为图片
//     content: '你好!![呲牙]', //当type为1时这里是文本消息，当type2为2时这里要存放图片地址；后续会支持语音的显示
//     ctime: new Date().toLocaleString() //显示当前消息的发送时间
// },
// {
//     direction: 1,
//     id: 2,
//     type: 1,
//     content: '你也好。[害羞]',
//     ctime: new Date().toLocaleString()
// }]

// import ScrollLoader from './scrollLoader.vue'

export default {
  name: 'WxChat',

  components: {
    // ScrollLoader
  },

  props: {
    data: { type: Array, required: true },
    width: { type: Number, default: 450 },
    wrapBg: { type: String, default: '#efefef' },
    // // maxHeight: { type: Number, default: 700 },
    contactAvatarUrl: { type: String, default: '' },
    ownerAvatarUrl: { type: String, default: '' },
    getUpperData: { type: Function, required: true }
    // getUnderData: { type: Function, required: true }
  },

  data() {
    return {
      isLoading: false,

      isUpperLaoding: false,
      isUnderLaoding: false,

      isRefreshedAll: false,
      isLoadedAll: false,

      minHeight: 500,
      maxHeight: 500,
      dataArray: []
    }
  },

  computed: {
    //

    messages: function() {
      const messages = this.$store.state.appChat.messages
      // const pid = this.user_partner_id
      // console.log(pid)
      const messages2 = messages
        // .filter((it, index) => index < 1)
        .map(item => {
          // console.log(item)

          return {
            id: item.id,
            direction: item.author_id[0] === this.user_partner_id ? 2 : 1,
            type: 1,
            ctime: item.date,
            content: item.body
          }
        })

      return messages2
    },

    isScroll: function() {
      return this.$store.state.appChat.isScroll
    },

    user_partner_id: function() {
      return this.$store.state.user.partner_id
    }
  },

  watch: {
    //
    messages: function(val) {
      // console.log('data2,', val)
      if (this.isScroll) {
        this.scroll()
      }
    }
  },

  created() {
    // this.initData()
  },
  mounted() {
    // document.getElementsByTagName('body')[0].scrollTop=0;
    this.minHeight = document.getElementById(
      'window-view-container'
    ).offsetHeight
    this.maxHeight = document.getElementById(
      'window-view-container'
    ).offsetHeight
  },

  methods: {
    // initData() {
    //   this.dataArray = this.dataArray.concat(this.data)
    // },

    async onRefresh() {
      await this.getUpperData()
      this.isLoading = false
    },

    // 屏幕滚动
    scroll() {
      console.log('chat scroll')
      // this.$refs.main.scrollTop = this.$refs.content.scrollHeight

      this.$nextTick(() => {
        this.$refs.main.scrollTop = this.$refs.content.scrollHeight
      })
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 500px;
  padding: 10px;
  box-sizing: border-box;
  /* background-color: pink; */
  overflow: auto;
}

.wxchat-container {
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  left: 0;
  top: 80;
  overflow: hidden;
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.2;
}
.window {
  box-shadow: 1px 1px 20px -5px #000; /*max-width: 450px;*/
  min-width: 300px;
  background: #f5f5f5;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  height: 100%;
  position: relative;
  z-index: 101;
}
button {
  border: 0;
  background: none;
  border-radius: 0;
  text-align: center;
}
button {
  outline: none;
}
.w100 {
  width: 100%;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.fs0 {
  font-size: 0;
}
.title {
  background: #000;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}
.loading,
.no-more {
  text-align: center;
  color: #b0b0b0;
  line-height: 100px;
}
.no-more {
  line-height: 60px;
}
.pull-right {
  float: right;
}
.link-line {
  text-decoration: underline;
}
.message {
  /*height: 100%;*/
  padding: 10px 15px;
  /*overflow-y: scroll;*/
  background-color: #f5f5f5;
}
.message li {
  margin-bottom: 15px;
  left: 0;
  position: relative;
  display: block;
}
.message .time {
  margin: 10px 0;
  text-align: center;
}
.message .text {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  max-width: calc(100% - 75px);
  min-height: 35px;
  line-height: 2.1;
  font-size: 15px;
  padding: 6px 10px;
  text-align: left;
  word-break: break-all;
  background-color: #fff;
  color: #000;
  border-radius: 4px;
  box-shadow: 0px 1px 7px -5px #000;
}
.message .avatar {
  float: left;
  margin: 0 10px 0 0;
  border-radius: 3px;
  background: #fff;
}
.message .time > span {
  display: inline-block;
  padding: 0 5px;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  background-color: #dadada;
}
.message .system > span {
  padding: 4px 9px;
  text-align: left;
}
.message .text:before {
  content: ' ';
  position: absolute;
  top: 9px;
  right: 100%;
  border: 6px solid transparent;
  border-right-color: #fff;
}
.message .self {
  text-align: right;
}
.message .self .avatar {
  float: right;
  margin: 0 0 0 10px;
}
.message .self .text {
  background-color: #9eea6a;
}

.message .self .text:before {
  right: inherit;
  left: 100%;
  border-right-color: transparent;
  border-left-color: #9eea6a;
}
.message .image {
  max-width: 200px;
}
img.static-emotion-gif,
img.static-emotion {
  vertical-align: middle !important;
}

.an-move-left {
  left: 0;
  animation: moveLeft 0.7s ease;
  -webkit-animation: moveLeft 0.7s ease;
}
.an-move-right {
  left: 0;
  animation: moveRight 0.7s ease;
  -webkit-animation: moveRight 0.7s ease;
}
.bgnone {
  background: none;
}
@keyframes moveRight {
  0% {
    left: -20px;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@-webkit-keyframes moveRight {
  0% {
    left: -20px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}
@keyframes moveLeft {
  0% {
    left: 20px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@-webkit-keyframes moveLeft {
  0% {
    left: 20px;
    opacity: 0;
  }
  100% {
    left: 0px;
    opacity: 1;
  }
}

@media (max-width: 367px) {
  .fzDInfo {
    width: 82%;
  }
}
</style>
